// webpack 使用node编写的，因此需要使用node的语法
const path = require('path')
const HtmlWepackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development', // 模式 默认两种： development 和 production
  entry: './src/index.js', // 入口
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
  },
  devServer: {
    port: 3000,
    progress: true,
    contentBase: './dist',
    open: true, // 自动打开浏览器
    proxy: {
      '/api/*': {
        target: 'http://localhost:8888'
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: { // 使用babel-loader 将ES6转换为ES5
            presets: [
              '@babel/preset-env'
            ]
          }
        },
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWepackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ]
}